<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">任务名</label>
        <el-input v-model="query.taskName" clearable placeholder="任务名" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">任务总图片数</label>
        <el-input v-model="query.numImage" clearable placeholder="任务总图片数" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />

        <label class="el-form-item-label">审核状态</label>
        <el-select v-model="query.status" clearable size="small" placeholder="审核状态" class="filter-item" style="width: 120px">
          <el-option v-for="item in dict.task_status" :key="item.id" :label="item.label" :value="item.value" />
        </el-select>
        <date-range-picker
          v-model="query.createTime"
          start-placeholder="任务创建时间"
          end-placeholder="任务创建时间"
          class="date-item"
        />
        <date-range-picker
          v-model="query.finishTime"
          start-placeholder="任务完成时间"
          end-placeholder="任务完成时间"
          class="date-item"
        />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission">
        <!--        <template slot="left">-->
        <!--          <el-button>aaa</el-button>-->
        <!--        </template>-->
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" title="修改任务名" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="任务名">
            <el-input v-model="form.taskName" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="绩效查询"
        :visible.sync="dialogVisible"
        width="70%"
        @close="cancel"
      >
        <!-- <date-range-picker
          v-model="uploadJsonTime"
          start-placeholder="标注上传时间"
          end-placeholder="标注上传时间"
          class="date-item"
        /> -->
        <el-date-picker
          v-model="uploadJsonTime"
          type="daterange"
          style=" width: 500px"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-select v-show="chooseNum == 0" v-model="selectValue"  placeholder="请选择">
          <el-option
            v-for="(item,index) in users"
            :key="index"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
        <el-radio-group v-model="chooseNum" style="margin-left: 50%">
          <el-radio :label="0">查询所选用户所有任务绩效</el-radio>
          <el-radio :label="1">查询当前任务所有绩效</el-radio>
          <el-radio :label="2">查询所有任务绩效</el-radio>
        </el-radio-group>
        <el-table
          v-loading="loading"
          ref="meritsTable"
          :data="meritsDetail"
          border
          height="330"
          show-summary
          style="width: 100%;margin-top: 1%">
          <el-table-column
            prop="date"
            label="日期"
            width="100">
          </el-table-column>
          <el-table-column
            prop="taskName"
            label="涉及任务"
            width="600">
          </el-table-column>
          <el-table-column
            prop="imageBox"
            label="标注总框数">
          </el-table-column>
          <el-table-column
            prop="imageNum"
            sortable
            label="标注总版数">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="queryMerits">点击查询绩效明细</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </span>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column prop="taskName" label="任务名" align="center"/>
        <el-table-column prop="nickName" label="所属用户" align="center"/>
        <el-table-column prop="fileList" :show-overflow-tooltip="true" label="分配到的文件路径" width="170px" align="center"/>
        <el-table-column prop="numBoxtotal" label="已标注框数" align="center"/>
        <el-table-column prop="numImage" label="任务总图片数" align="center"/>
        <el-table-column prop="numFinish" label="标注完成图片数" align="center"/>
        <el-table-column prop="numCheckedAll" label="已审核图片数" align="center"/>
        <el-table-column prop="numChecked" label="审核通过图片数" align="center"/>
        <!--0未完成/1完成部分/2等待审核/3审核通过/4审核不通过-->
        <el-table-column prop="status" label="审核状态" align="center">
          <template slot-scope="scope">
            {{ dict.label.task_status[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"/>
        <el-table-column prop="finishTime" label="完成时间" align="center"/>
        <el-table-column label="审核" width="150px" align="center">
          <template slot-scope="scope">
            <el-button @click="audit(scope.row)" type="success">审核</el-button>
          </template>
        </el-table-column>
        <el-table-column label="绩效详情" width="150px" align="center">
          <template slot-scope="scope">
            <el-button @click="merits(scope.row)">点击查询</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="checkPer(['admin','taskMark:edit','taskMark:del'])" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
// import { crudTaskMark, getImagesByTaskMarkId   } from '@/api/system/taskMark'
import { getImagesByTaskMarkId,getMerits} from '@/api/task/taskassign'
import crudTaskMark from '@/api/system/taskMark'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import store from '../../../store'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'
import { getStaff } from '@/api/system/user'

const defaultForm = { taskName: null, fileList: null, numImage: null, numFinish: null, createTime: null, finishTime: null, numChecked: null, status: null, markTaskId: null }
export default {
  name: 'TaskMark',
  store,
  components: { pagination, crudOperation, rrOperation, udOperation, DateRangePicker },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['task_status'],
  cruds() {
    return CRUD({ title: 'api/taskMark', url: 'api/taskMark', idField: 'markTaskId', sort: ['status,asc', 'markTaskId,desc'], crudMethod: { ...crudTaskMark }, optShow: { add: false, reset: true, edit: true, del: true }})
  },
  data() {
    return {
      selectValue: null,
      users: [],
      queryUserId: null,  //当前任务的用户
      loading: false,
      meritsDetail: null,     //绩效详情
      queryTaskId: null,    //当前选中的任务ID
      chooseNum: 1,     //是否查该任务所属人员的所有绩效
      dialogVisible: false,
      uploadJsonTime: null,
      taskList: [],
      permission: {
        add: ['admin', 'taskMark:add'],
        edit: ['admin', 'taskMark:edit'],
        del: ['admin', 'taskMark:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'taskName', display_name: '任务名' },
        { key: 'numImage', display_name: 'file_list中所含有的图片数量' }
      ]
    }
  },
  updated() {
    if(this.dialogVisible){
      this.$nextTick(() => {
        this.$refs['meritsTable'].doLayout();
      })
    }
  },
  methods: {
    queryMerits(){
      // isAllMerits :   0为单个任务绩效，1为全部任务绩效
      this.loading = true
      let data = {}
      data.uploadJsonTime = this.uploadJsonTime
      //查当前用户所有任务绩效  即传用户id,isAllMerits和时间
      if (this.chooseNum==0){
        if(!this.selectValue){
          this.$message({
            type: 'error',
            message: '未选择用户'
          })
          this.loading = false
          return
        }
        // data.userId = this.queryUserId
        data.userId = this.selectValue
        data.isAllMerits = 1
        getMerits(data).then(res => {   //带时间范围和任务id去查
          this.meritsDetail = res
          if (res.length==0) throw err;
          this.loading = false
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '暂无数据'
          })
          this.loading = false
        })
      }
      //查当前任务绩效  即传任务id和isAllMerits和时间
      else if (this.chooseNum==1){
        data.markTaskId = this.queryTaskId
        data.isAllMerits = 0
        getMerits(data).then(res => {   //带时间范围和任务id去查
          this.meritsDetail = res
          if (res.length==0) throw err;
          this.loading = false
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '暂无数据'
          })
          this.loading = false
        })
      }
      //查询当前用户所有任务绩效，即只传isAllMerits和时间
      else{
        data.isAllMerits = 1
        getMerits(data).then(res => {
          this.meritsDetail = res
          if (res.length==0) throw err;
          this.loading = false
        }).catch(() => {
          this.loading = false
          this.$message({
            type: 'error',
            message: '暂无数据'
          })
        })

      }
    },
    cancel() {
      this.dialogVisible = false
      this.meritsDetail = null
    },
    merits(row){
      this.selectValue = null
      this.chooseNum = 1
      let data = {}
      let roleIds = []
      roleIds.push(2)   //role 为 2 是标注人员
      data["roleIds"] = roleIds
      getStaff(data).then(res => {s
        this.users = res
      })
      this.queryUserId = row.users[0].id
      this.queryTaskId = row.markTaskId
      this.dialogVisible = true
      let date = new Date();
      let defaultYear = date.getFullYear()
      let defaultMonth = date.getMonth()
      let defaultEndDay = date.getDate() + 1
      /*默认为本月一号到当天*/
      this.uploadJsonTime = [new Date(defaultYear, defaultMonth-1, 1, 0, 0),
        new Date(defaultYear, defaultMonth, defaultEndDay, 0, 0)]
    },
    audit(row) {
      this.$store.commit('SET_FLAG_TRUE')
      getImagesByTaskMarkId (row.markTaskId).then( res => {
        this.$router.push({
          path: 'taskcheck',  //任务选择页面的路由地址名
          // params: { data: '222' },
          query: { row: res, taskMarkId: row.markTaskId }
        })
      })
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    [CRUD.HOOK.afterRefresh]() {
      this.taskList = []
      let data = this.crud.data
      for(let i in data){
        let taskDetail = {}
        taskDetail.markTaskId = data[i].markTaskId
        taskDetail.taskName = data[i].taskName
        taskDetail.fileList = data[i].fileList
        taskDetail.numImage = data[i].numImage
        taskDetail.numFinish = data[i].numFinish
        taskDetail.numChecked = data[i].numChecked
        taskDetail.createTime = data[i].createTime
        taskDetail.finishTime = data[i].finishTime
        taskDetail.status = data[i].status
        let num_box = 0;
        let all_checked_num = 0;
        for(let j in data[i].images){
          num_box += data[i].images[j].numBox
          if(data[i].images[j].status === 4 || data[i].images[j].status === 0 ){
            all_checked_num++
          }
        }
        taskDetail.numBoxtotal = num_box
        taskDetail.numCheckedAll = all_checked_num
        taskDetail.nickName =data[i].users[0].nickName
        taskDetail.users = this.crud.data[i].users
        this.taskList.push(taskDetail)
      }
      this.crud.data = this.taskList
      return true

    }
  }
}
</script>

<style scoped>

</style>
